<template>
  <div>
    <div class="crop-hospital" v-show="!popShow">
      <div class="main_top pl16 pr16">
        <van-swipe
          class="my-swipe"
          style="
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
            height: 150px;
          "
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item
            ><img
              style="width: 100%; height: 100%"
              src="@/assets/image/banner-1.png"
              alt=""
          /></van-swipe-item>
        </van-swipe>

        <div class="menu_bar">
          <div
            class="menu_item"
            :key="index"
            v-for="(item, index) in iconList"
            @click="jumpMenuItem(item.type)"
          >
            <img class="menu_img" :src="item.img" alt="" />
            <div class="title">{{ item.title }}</div>
          </div>
        </div>
      </div>
      <div class="line10px"></div>
      <div class="recomend">
        <div class="recommend_header">
          <div class="recommend_title fz18">
            {{ this.role == "specialist" ? "在线问诊" : "推荐医生" }}
          </div>
          <div class="recommend_more" @click="goMore">
            更多
            <img class="w7" src="../../assets/icon/more.png" alt="" />
          </div>
        </div>

        <div class="card_wrapper">
          <div class="card_item" v-for="item in cardList" :key="item.id">
            <doctor-card
              :rateShow="false"
              :item="item"
              v-if="role != 'specialist'"
            />
            <apply-card :item="item" v-else />
          </div>
        </div>
      </div>
    </div>
    <div v-show="!!popShow">
      <div
        class="msgBox"
        v-for="item in userInfo.roleList"
        :key="item.id"
        @click="handleClick(item)"
      >
        <img
          v-if="item.roleCode == 'declareDeclarant'"
          class="imageStyleS"
          src="../../assets/image/specialistIcon.png"
        />

        <img
          v-if="item.roleCode == 'sugarOffice'"
          class="imageStyleS"
          src="../../assets/image/specialist.png"
        />

        <img
          v-if="item.roleCode == 'city'"
          class="imageStyleS"
          src="../../assets/image/city.png"
        />

        <img
          v-if="item.roleCode == 'county'"
          class="imageStyleS"
          src="../../assets/image/county.png"
        />
        <img
          v-if="item.roleCode == 'sugarcaneGrower'"
          class="imageStyleS"
          src="../../assets/image/sugarcaneGrower.png"
        />
        <img
          v-if="item.roleCode == 'evaluationExpert'"
          class="imageStyleS"
          src="../../assets/image/evaluationExpert.png"
        />
        <span class="text-grey colorStyle title">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import DoctorCard from "@/components/doctor-card";
import ApplyCard from "@/components/apply-card";
import store from "@/store";
import API from "@/services";
import { mapGetters } from "vuex";

export default {
  data() {
    return {
      cardList: [],
      userInfo: {},
      popShow: true,
    };
  },
  created() {
    if (store.state.token) {
      this.initRecommendList();
    } else {
      let inter = setInterval(() => {
        if (store.state.token) {
          clearInterval(inter);
          this.initRecommendList();
        }
      }, 200);
    }
    this.getTokenInfo();
  },
  methods: {
    handleClick(item) {
      store.commit("setRole", item.roleCode);
      this.popShow = false;
    },
    async getTokenInfo() {
      let param = new URLSearchParams();
      param.append("xSugarToken", this.getAppToken);
      param.append("type", 1);
      const result = await API.getNewToken({
        data: param,
      });
      this.userInfo = result.userInfo;
      let resData = this.userInfo.roleList;
      if (resData.length == 1) {
        store.commit("setRole", resData[0].roleCode);
        this.popShow = false;
      }
    },
    goMore() {
      if (this.role != "specialist") {
        this.$router.push("/cropdoctor-list?type=0");
      } else {
        this.$router.push("/problem-list?type=0");
      }
    },

    jumpMenuItem(index) {
      // 0-在线问诊，1-预约挂号，2-上门服务
      // 0 在线问诊 1预约挂号 2上门服务 3 我的服务
      if (index === "3") {
        this.$router.push("/my-service");
        return;
      }

      if (this.role != "specialist") {
        this.$router.push("/cropdoctor-list?type=" + index);
      } else {
        this.$router.push("/problem-list?type=" + index);
      }
    },

    async initRecommendList() {
      let result;
      if (this.role == "specialist") {
        result = await API.getProblemList({
          params: { type: "0", status: "0" },
        });
      } else {
        result = await API.getRecommendExpert();
      }
      if (result.length > 0) {
        this.cardList = result;
      }
      // console.log(result, 'result')
    },
  },

  computed: {
    ...mapGetters(["getAppToken"]),
    ...mapGetters(["isExpert"]),
    iconList() {
      const arr = [
        {
          img: require("@/assets/icon/zjyy_1.png"),
          title: "在线问诊",
          type: "0",
        },
        {
          img: require("@/assets/icon/zjyy_2.png"),
          title: "预约挂号",
          type: "1",
        },
        {
          img: require("@/assets/icon/zjyy_3.png"),
          title: "上门服务",
          type: "2",
        },
        {
          img: require("@/assets/icon/zjyy_4.png"),
          title: "我的服务",
          type: "3",
        },
      ];
      if (this.role == "specialist") {
        arr.pop();
      }

      return arr;
    },

    role() {
      return this.$store.getters.isExpert;
    },
  },

  updated() {
    //this.initRecommendList()
  },
  components: {
    DoctorCard,
    ApplyCard,
  },
};
</script>

<style lang="scss" scoped>
.crop-hospital {
  padding-left: 0 !important;
  padding-right: 0 !important;

  .main_top {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
    // opacity: 1;
    border-radius: 0px 0px 12px 12px;
  }

  .menu_bar {
    padding: 16px;
    display: flex;
    justify-content: space-between;

    .menu_item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .menu_img {
      width: 40px;
    }

    .title {
      margin-top: 8px;
    }
  }

  .recomend {
    padding: 0 16px;

    .recommend_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 16px;
      margin-bottom: 12px;

      .recommend_title {
        height: 25px;
        // font-size: 36px;
        line-height: 25px;
        color: #333333;
      }

      .recommend_more {
        display: flex;
        align-items: center;

        color: #999999;
        height: 20px;
      }
    }

    .card_wrapper {
      .card_item {
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.w7 {
  width: 7px;
  margin-left: 8px;
}
.margin-top-xl {
  margin-top: 5px;
}
.msgContent {
  display: flex;
  align-items: center;
}
.imageStyle {
  width: 80rpx;
  height: 80rpx;
  margin-right: 10rpx;
}

.margin-top-xl {
  margin-top: 5px;
}
.msgContent {
  display: flex;
  align-items: center;
}
.imageStyleS {
  width: 30px;
  height: 30px;
}
.msgBox {
  background-color: #f1f1f1;
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 20px;
  justify-content: center;
  align-items: center;
}

.msgBoxRight {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.message {
  overflow: hidden;
  margin-right: 15px;
  margin-left: 15px;
  border-radius: 10px;
  margin-top: 10px;
}

.colorStyle {
  color: #000;
  margin-left: 10px;
}

.noMsg {
  text-align: center;
  margin-top: 20px;
}

.title {
  font-size: 16px;
  font-weight: 500;
}
</style>
